<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 20459
  Date: 2023/4/13
  Time: 16:57
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>SAMSUNG三星商城后台</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="shortcut icon" href="../x-admin/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="../x-admin/css/font.css">
    <link rel="stylesheet" href="../x-admin/css/xadmin.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.min.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.jquery.min.js"></script>
    <script src="../x-admin/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../x-admin/js/xadmin.js"></script>
</head>
<body>
<form id="myfrom" action="/goodsedit" method="post"  enctype="multipart/form-data">
<%--商品id--%>
<c:forEach items="${goodslist}" var="a">
    <input type="hidden" name="v" value="goodsEdit">
<div class="layui-form-item">
    <label for="level-id" class="layui-form-label">
        商品id
    </label>
    <div class="layui-input-inline" style="width: 50px">
        <input type="text" id="level-id" name="level-id" value="${a.sid}" class="layui-input">
    </div>
</div>
<%--商品名称--%>
<div class="layui-form-item">
    <label for="level-name" class="layui-form-label">
        <span class="x-red">商品名称</span>
    </label>
    <div class="layui-input-inline">
        <input type="text" id="level-name" name="level-name" required="" lay-verify="required"
               autocomplete="off" value="${a.sname}" class="layui-input">
    </div>
</div>
<%--商品价格--%>
<div class="layui-form-item">
    <label for="level-kiss" class="layui-form-label">
        <span class="x-red">商品标注价格</span>
    </label>
    <div class="layui-input-inline">
        <input type="text" id="level-kiss" name="level-price" required="" value="${a.sprice}" lay-verify="required"
               autocomplete="off" class="layui-input">
    </div>
</div>
<%--商品类别--%>
<div class="layui-form-item">
    <label for="level-kiss" class="layui-form-label">
        <span class="x-red">商品所属类别</span>
    </label>
    <div class="layui-input-inline">
<%--        <input type="text" id="level-leibie" name="level-kiss" required="" value="0-1000" lay-verify="required"--%>
<%--               autocomplete="off" class="layui-input">--%>
        <select name="level-leibie" id="level-leibie" required="" lay-verify="required" autocomplete="off" class="layui-input">
            <option value="${a.lid}">${a.lname}</option>
            <c:forEach items="${classification}" var="x">
                <c:if test="${a.lid!=x.lid}">
                <option value="${x.lid}">${x.lname}</option>
                </c:if>
            </c:forEach>
        </select>
    </div>
</div>
<%--商品状态--%>
<%--商品主图片上传--%>

<div class="layui-form-item">
    <label for="level-kiss" class="layui-form-label">
        <span class="x-red">商品图片</span>
    </label>
    <div class="layui-upload-list" style="height: 80px;width: 80px;display: inline-block;border: 1px black solid">
        <img class="layui-upload-img" src="${a.url}" id="demo1" style="height: 80px;width: 80px">
    </div>
    <input type="file"  name="myfile" id="test2" accept="img/*" style="display: none">
    <button type="button" class="layui-btn" id="tjbtn" onclick="b()">更改图片</button>
</div>
<%--商品前端预览图--%>
<div class="layui-form-item">
    <label for="level-kiss" class="layui-form-label">
        <span class="x-red" style="line-height: 250px">前端轮播预览：</span>
    </label>
    <c:forEach items="${commodityimgs}" var="img" varStatus="y">
        <c:if test="${a.sid == img.sid}">
            <div class="upload">+
                <input id="myfile${y.index+1}"  type="file" name="myinput${y.index+1}">
                <input type="hidden" name="hiddeninput${y.index+1}" value="${img.tname}">
                <img id="myimg" class="imgindex${y.index+1}" width="100" height="100" src="${img.tname}">
            </div>
        </c:if>
    </c:forEach>
</div>
</c:forEach>
<div class="layui-form-item">
    <label class="layui-form-label">
    </label>
    <button id="sub" onclick="c()"  class="layui-btn" lay-filter="save" lay-submit="" >
        保存
    </button>
</div>

</form>
<script>
    function c(){
        x_admin_close();
    }

    let reader = new FileReader();
    onload = function () {
        a();
    }
    function a(){
        let file = document.querySelector("input[name='myfile']");
        console.log(file)
        file.addEventListener("change",function (){
            let alk = event.target.files[0]
            reader.readAsDataURL(alk);
        })

        reader.onload=function (){
            console.log(document.querySelector("#demo1"));
            document.querySelector("#demo1").src=reader.result;
        }
    }
    function b(){
        let file = document.querySelector("input[name='myfile']");
        file.click();
    }




    let reader1=new FileReader();
    let file1=document.querySelector("#myfile1");
    file1.addEventListener("change",function () {
        let one=event.target.files[0];//获取选中文件
        reader1.readAsDataURL(one);//读取文件
    });
    reader1.onload=function (){//读取后自动执行
        document.querySelector(".imgindex1").src=reader1.result;
    };


    let reader2=new FileReader();
    let file2=document.querySelector("#myfile2");
    file2.addEventListener("change",function () {
        let one=event.target.files[0];//获取选中文件
        reader2.readAsDataURL(one);//读取文件
    });
    reader2.onload=function (){//读取后自动执行
        document.querySelector(".imgindex2").src=reader2.result;
    };


    let reader3=new FileReader();
    let file3=document.querySelector("#myfile3");
    file3.addEventListener("change",function () {
        let one=event.target.files[0];//获取选中文件
        reader3.readAsDataURL(one);//读取文件
    });
    reader3.onload=function (){//读取后自动执行
        document.querySelector(".imgindex3").src=reader3.result;
    };


    let reader4=new FileReader();
    let file4=document.querySelector("#myfile4");
    file4.addEventListener("change",function () {
        let one=event.target.files[0];//获取选中文件
        reader4.readAsDataURL(one);//读取文件
    });
    reader4.onload=function (){//读取后自动执行
        document.querySelector(".imgindex4").src=reader4.result;
    };


    let reader5=new FileReader();
    let file5=document.querySelector("#myfile5");
    file5.addEventListener("change",function () {
        let one=event.target.files[0];//获取选中文件
        reader5.readAsDataURL(one);//读取文件
    });
    reader5.onload=function (){//读取后自动执行
        document.querySelector(".imgindex5").src=reader5.result;
    };


    let reader6=new FileReader();
    let file6=document.querySelector("#myfile6");
    file6.addEventListener("change",function () {
        let one=event.target.files[0];//获取选中文件
        reader6.readAsDataURL(one);//读取文件
    });
    reader6.onload=function (){//读取后自动执行
        document.querySelector(".imgindex6").src=reader6.result;
    };


    let reader7=new FileReader();
    let file7=document.querySelector("#myfile7");
    file7.addEventListener("change",function () {
        let one=event.target.files[0];//获取选中文件
        reader7.readAsDataURL(one);//读取文件
    });
    reader7.onload=function (){//读取后自动执行
        document.querySelector(".imgindex7").src=reader7.result;
    };




</script>
</body>
</html>
